<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    a{
        list-style:none;
        text-decoration: none;
        color:red;
    }
    .left {
        float: left;
        font-size: 16px;
        padding-left: 3px;
        padding-bottom: 5px;
    }

    .right {
        float: right;
        font-size: 16px;
        padding-right: 8px;
        padding-bottom: 5px;
    }

    .content {
        margin: 0 auto;
        width: 100%;
        background:url("/media/avatar/back.jpg") repeat-y;
    }
    .title {
        margin: 0 auto;
        text-align: left;
        line-height: 50px;
        color: salmon;
        height: 60px;
        font-size: 18px;
        margin-bottom: 30px;
        padding-top: 28px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .shoplist {
        width: 1500px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .shoplist li {
        text-align: center;
        width: 200px;
        margin-left: 50px;
        list-style: none;
        margin: 1.5%;
        border: rgb(221, 221, 221) 1px solid;
        background-color: rgb(250, 240, 240);
    }
    .shopname {
        font-size: 20px;
        width: 200px;
        float: left;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 8px;
    }
    .shopimg {
        margin-bottom: 15px;
        height: 200px;
        width: 200px;
    }
    .anniu {
        width: 90px;
        height: 40px;
        float: left;
        text-align: center;
        margin-left: 5px;
    }
    .addshop {
        width: 200px;
        height: 80px;
        margin-left: 1300px;
        text-align: center;
        line-height:80px;
        font-size: 30;
        border: rgb(200, 200, 221) 2px solid;
        background-color: blanchedalmond;
        border-radius: 90px;
        margin-top: 40px;
    }
    .dibu {
        margin: 0 auto;
        margin-top:300px;
        margin-bottom: 80px;
    }
</style>

<body>
    <div class="content">
        <div class="title">
            <h1>>>>网售商品展示>>></h1>
        </div>
        <div class="shoplist">
            <ul class="shoplist">
                {% for shop in shops %}
                <li title="{{shop.spname}}">
                    <p>
                        <img src="{{shop.spimg.url}}" class="shopimg">
                    <p class="shopname">{{shop.spname}}</p>
                    <br>
                    <br>
                    <p class="left">库存：{{shop.spcount}} 份</p>
                    <p class="right"><a href="/addQuestion?ids={{shop.id}}">删除商品</a></p>
                    </p>
                </li>
                {% endfor %}
            </ul>
            <a name="addsp" href="/rediaddShop" class="addshop">添加商品</a>
            <div class="dibu">

            </div>
        </div>
    </div>
    <script type="text/javascript">
<!--    function myrefresh() {-->
<!--    window.location.reload();-->
<!--        }-->
<!--    setTimeout('myrefresh()', 3000); //指定1秒刷新一次-->
        $(function () {
            $(".right>a").click(function (e) {
                alert('提交申请成功！')
                let id = $(this).attr("data-id")
            });
        });
    </script>
</body>

</html>